<template>
  <div class="row">
    <div class="col-md-12">
      <h1 class="page-header">
        讨论管理
        <AddDiscussTopicDialog></AddDiscussTopicDialog>
      </h1>

    </div>
  </div>

  <el-table :data="data" style="width: 100%" max-height="250">
    <el-table-column prop="Topic" label="Topic" width="150"/>
    <el-table-column :formatter="ZeroAndOneToTF" prop="IfDone" label="是否结题" width="120"/>
    <el-table-column :formatter="ZeroAndOneToTF" prop="IfTeacher" label="是否教师上传" width="120"/>
    <el-table-column :formatter="ZeroAndOneToTF" prop="IfImportant" label="是否重要" width="120"/>
    <el-table-column :formatter="TimeFormat" prop="CreatedAt" label="上传时间" width="300"/>
    <el-table-column :formatter="ZeroAndOneToTF" label="Operations" width="300">
      <template #default="scope">
        <el-button
            type="text"
            size="small"
            @click.prevent="deleteRow(scope.$index)"
        >
          删除
        </el-button>
        <el-button
            type="text"
            size="small"
            @click.prevent="deleteRow(scope.$index)"
        >
          查看评论
        </el-button>
        <el-button
            type="text"
            size="small"
            @click.prevent="DoneRow(scope.$index)"
        >
          结题
        </el-button>
        <el-button
            type="text"
            size="small"
            @click.prevent="ImportantRow(scope.$index)"
        >
          重要
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  <div class="demo-pagination-block">
    <el-pagination
        v-model:currentPage="page"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="10"
        layout="sizes, prev, pager, next"
        :total="count"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    >
    </el-pagination>
  </div>
</template>

<script>
import axios from "axios";
import AddDiscussTopicDialog from "./AddDiscussTopicDialog";

export default {
  name: "DiscussList",
  components: {AddDiscussTopicDialog},
  data() {
    return {
      count:0,
      data: [{
        "ID": "1470374068829032448",
        "CreatedAt": "2021-12-13T20:44:30.897+08:00",
        "UpdatedAt": "2021-12-13T20:44:30.897+08:00",
        "DeletedAt": null,
        "Content": "\u003cp\u003ewdada\u003c/p\u003e",
        "Topic": "wdada",
        "SponsorId": "2466801906931208192",
        "IfDone": "0",
        "IfTeacher": "0",
        "IfImportant": "0"
      }],
      pageSize:100,
      page:1
    }
  },
  created() {
    this.setUpData()
  },
  methods: {
    TimeFormat(row, column, cellValue, index){
      return cellValue.replace(/T/,"  ").replace(/\..+/,"")
    },
    ZeroAndOneToTF(row, column, cellValue, index){
      if (cellValue==='1'){
        return "✔"
      }else {
        return ""
      }
    },
    DoneRow(index){
      var data = this.data[index]
      if (data.IfDone==='0'){
        data.IfDone='1'
      }else {
        data.IfDone='0'
      }
      axios.post("/api/teacher/UpdateDiscussTopic",data).then((res)=>{
        if (res.status===200){
          this.setUpData()
        }
      })
    },
    ImportantRow(index){
      var data = this.data[index]
      if (data.IfImportant==='0'){
        data.IfImportant="1"
      }else {
        data.IfImportant="0"
      }
      axios.post("/api/teacher/UpdateDiscussTopic",data).then((res)=>{
        if (res.status===200){
          this.setUpData()
        }
      })
    },
    setUpData(){
      axios.get("/api/PageDiscussTopic", {
        params: {
          pageSize: this.pageSize,
          page: this.page
        }
      }).then((res) => {
        if (res.status===200){
          this.data = res.data.Data
          this.count = res.data.Count
        }
      })
    },
    deleteRow(index) {
      axios.get("/api/teacher/DelDiscussTopic",{
        params:{
          id:this.data[index].ID
        }
      }).then((res)=>{
        if (res.status===200){
          this.setUpData()
        }
      })
    },
    handleSizeChange(val){
      this.pageSize = val
      this.setUpData()
    },
    handleCurrentChange(val){
      this.page = val
      this.setUpData()
    }
  },
}
</script>

<style scoped>

</style>